﻿<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>文件上传</title>
    <script src="/Scripts/SWFUpload/swfupload.js"></script>
    @RenderPage("../Shared/Scripts.cshtml")
</head>
<body>
    <p style="text-align:center">
        <span style="font-size:120%;color:red">文件上传协议</span><br />
        <span>
            1.从此页面上传的所有文件均为可公开访问的文件。<a href="/Files/Upload/">已上传的文件</a><br />
            2.不允许上传对未成年人的身心发育不利的音像制品。<br />
            3.不允许上传超过20M大的文件。<br />
            4.只允许上传图片，音频，视频，文档，文本文件之类的对服务器安全无影响的文件。<br />
            5.网络管理员有权随时更改此协议的所有内容而不需通知用户。<br />
        </span>
    </p><br /><hr />
    <div style="text-align:center;margin:0 auto">
        <div id="swfu-placeholder"></div>
        <div>
            <input type="button" id="upload" onclick="swfu.startUpload();" value="上传" />
            <input type="button" id="stop" onclick="swfu.stopUpload();" value="停止上传" />
        </div>
        <div id="swfu-upload-status"></div>
    </div>
    <script>
        var statusE = document.getElementById('swfu-upload-status');//文件上传进度节点

        var msg = "";

        //文件选择窗口关闭事件处理
        //如果有文件成功选择并添加到上传队列，则自动上传
        function fileDialogComplete(selectedNum, queuedNum) {
            if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0
                this.startUpload();//开始上传
                this.setButtonDisabled(true);//禁用上传按钮
            }
        }

        //上传过程事件处理
        //用来动态显示文件上传进度
        function uploadProgress(file, curBytes, totalBytes) {
            statusE.innerHTML = ['文件名：', file.name, '<br />总尺寸：', totalBytes, 'B<br />已上传：', curBytes, 'B<br />进度：', parseInt((curBytes / totalBytes) * 100), '%'].join('');
        }

        //上传过程中出错
        function uploadError(file, errCode, msg) {
            statusE.innerHTML += ['<br />文件[', file.name, ']上传出错，出错代码：[', errCode, ']，出错原因：', msg].join('');
            //msg += ['<br />文件[', file.name, ']上传出错，出错代码：[', errCode, ']，出错原因：', msg].join('');
        }

        //上传成功
        function uploadSuccess(file, data) {
            statusE.innerHTML += ['<br />文件[', file.name, ']上传完成，服务器返回信息：', data].join('');
            //msg += ['<br />文件[', file.name, ']上传成功，服务器返回信息：', data].join('');
        }

        //上传完成，无论上传过程中出错还是上传成功，都会触发该事件，并且在那两个事件后被触发
        function uploadComplete(file) {
            statusE.innerHTML += ['<br />文件[', file.name, ']结束上传<br /><br /><hr color=red /><br />'].join('');
            this.setButtonDisabled(false);//恢复上传按钮
            this.startUpload();
            //msg += ['<br />文件[', file.name, ']结束上传'].join('');
            msg += statusE.innerHTML;
            statusE.innerHTML = msg;
        }

        var swfuOption = {//swfupload选项
            upload_url: "/Upload/DoUpload", //接收上传的服务端url
            flash_url: "/Scripts/SWFUpload/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
            button_placeholder_id: "swfu-placeholder",//上传按钮占位符的id
            file_size_limit: "20MB",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
            button_width: 215, //按钮宽度
            button_height: 45, //按钮高度
            button_text: '<span class="btn-txt">选择文件</span>',//按钮文字
            button_text_style: '.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"}',//按钮文字样式
            button_text_top_padding: 6,//文字距按钮顶部距离
            button_text_left_padding: 65,//文字距离按钮左边距离
            button_image_url: "/Contents/Images/swfu_bg.png",
            file_dialog_complete_handler: fileDialogComplete,//文件选择对话框关闭
            upload_progress_handler: uploadProgress,//文件上传中
            upload_error_handler: uploadError,//文件上传出错
            upload_success_handler: uploadSuccess,//文件上传成功
            upload_complete_handler: uploadComplete//文件上传完成，在upload_error_handler或者upload_success_handler之后触发
        }
        var swfu = new SWFUpload(swfuOption);
    </script>
</body>
</html>
